<template>
    <div class="brand">
        <!-- 打字机 -->
        <div class="title">
            {{ obj.output }}
            <span class="easy-typed-cursor">|</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import EasyTyper from "easy-typer-js";
import {onMounted, reactive} from "vue";

const obj = reactive({
    output: "",
    isEnd: false,
    speed: 100,
    singleBack: false,
    sleep: 0,
    type: "normal",
    backSpeed: 100,
    sentencePause: false,
});
const fetchData = () => {
    fetch("https://v1.hitokoto.cn")
        .then((res) => {
            return res.json();
        })
        .then(({hitokoto}) => {
            new EasyTyper(
                obj,
                hitokoto,
                () => {
                },
                () => {
                }
            );
        });
};
onMounted(() => {
    fetchData();
});
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";

.brand {
  @include flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100px;

  .title {
    letter-spacing: 0.1em;
  }
}

.easy-typed-cursor {
  margin-left: 0.625rem;
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
</style>
